<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/extension.css">
</head>

<body>
    <div id="app" class="extension-page-wrap flex-center">
        <div class="extension-input-box">
            <div class="input-box_item">
                <input type="text" placeholder="Your Mobile" v-model="formData.mobile">
                <div class="input-box_time">+{{ formData.countryCode }}</div>
            </div>
            <div class="input-box_item">
                <input class="input-box_down" v-model="formData.verifyCode" type="text" placeholder="Verfiy Code">
                <div v-if="showTime" class="input-box_time" @click="verifyCode">OPT</div>
                <div v-else class="input-box_down-time">{{ downTime }}</div>
            </div>
            <div class="input-box_item">
                <input type="password" placeholder="Password" v-model="formData.password">
            </div>
            <div class="input-box_item">
                <input type="text" placeholder="5414305" v-model="formData.Invitation">
            </div>
            <div class="input-box_button" @click="CreateAnAccound">Create An Accound</div>
        </div>
        <div class="overlay" v-if="showOverlay">
            <div class="extension-overlay" @click="showOverlay=false"></div>
            <div class="extension-overlay-wrap">
                <div class="extension-overlay-box">
                    <div class="overlay-box_img"><img src="./images/duigou.png" alt=""></div>
                    <p class="overlay-box_text">Congratulations. </p>
                    <p class="overlay-box_text">You have registered successfully!</p>
                    <div class="overlay-box_button" @click="ToLogin">Down Login</div>
                </div>
                <div class="extension-overlay-line"></div>
                <div class="extension-overlay-x" @click="showOverlay=false"><img src="./images/X-01.png" alt=""></div>
            </div>
        </div>
        <div v-if="showToast" class="toast">{{toast}}</div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/vue-router.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            name: "Extension",
            data: {
                showOverlay: false, // 控制遮罩层显示
                showTime: true, //控制倒计时显示
                showToast: false, //控制消息提示显示
                downTime: 60, //倒计时时间
                toast: 'success', //消息提示内容
                formData: {
                    mobile: '',        //手机号
                    countryCode: 91,   //地区码
                    verifyCode: '',    //验证码
                    password: '',      //密码
                    Invitation: '5414305',    //邀请码
                    
                },
            },
            methods: {
                CreateAnAccound(){
                    this.registerMess()
                },
                // 获取验证码事件
                verifyCode(){
                    if(this.formData.mobile == ''){
                        this.showToast = true
                        this.toast = 'mobile error'
                        setTimeout(() => {
                            this.showToast = false
                        }, 2000);
                    }else{
                        axios
                        .post("https://api.99coin.in/sms", {
                            mobile : this.formData.mobile,
                            country_code: this.formData.countryCode,
                            type: 'register'
                        })
                        .then(res => {
                            if(res.data.code == -100){
                                this.showToast = true
                                this.toast = res.data.msg 
                                setTimeout(() => {
                                    this.showToast = false
                                }, 2000);
                            }else{
                                this.showTime = false
                                this.showToast = true
                                this.toast = res.data.msg 
                                setTimeout(() => {
                                    this.showToast = false
                                }, 2000);
                                var down = setInterval(() => {
                                    if(this.downTime > 0){
                                        this.downTime--
                                    }else{
                                        clearInterval(down);
                                        this.showTime = true
                                    }
                                }, 1000);
                            }   
                        });
                    }
                    
                },
                ToLogin(){
                    axios.post("https://api.99coin.in/version_update")
                    .then(res => {
                        console.log(res)
                        if(res.data.code == 100){
                            window.location.href = res.data.data.downUrl
                        }else{
                            this.showToast = true
                            this.toast = res.data.msg
                            setTimeout(() => {
                                this.showToast = false
                            }, 2000);
                        }
                        
                    });
                },

                // 注册方法
                registerMess(){
                    let mobile = this.formData.mobile       //手机号
                    let countryCode = this.formData.countryCode       //地区码
                    let verifyCode = this.formData.verifyCode     //验证码
                    let password = this.formData.password       //密码
                    let Invitation = this.formData.Invitation       //邀请码

                    axios
                    .post("https://api.99coin.in/register", {
                        mobile : mobile,
                        country_code :countryCode,
                        verify_code : verifyCode,
                        password : password,
                        invite_code : Invitation
                    })
                    .then(res => {
                        if(res.data.code == 100){
                            this.showOverlay = true
                        }else{
                            this.showToast = true
                            this.toast = res.data.msg 
                            setTimeout(() => {
                                this.showToast = false
                            }, 2000);
                        }
                        
                    });
                }
            },
            created() {}
        });
    </script>
</body>

</html>